<!--
 * @Autor: 王琛
 * @Description: 免责弹窗
 * @Copyright: 版权归个人所有
-->
<style lang="stylus" scoped>
#disclaimerPopup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px
  background: rgba(0, 0, 0, .5);
  z-index: 101;

  .disclaimerBox {
    width: 80%;
    height: 70%;
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    padding: 15px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .7);
    border-radius: 10px;
    display: grid;
    grid-template-rows:30px calc(100% - 30px - 30px - 40px) 25px;
    grid-template-columns: 100%;
    grid-gap: 20px;
    align-content: center;

    & > p {
      width: 100%;
      height: 100%;
      font-size: 20px;
      font-weight: 400;
      color: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .disclaimer_content {
      width: 100%;
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
      border: 1px solid #F4F3F6;
      border-radius: 6px;
      overflow: auto;
      color:#fff;
      font-size:14px;
      line-height:25px;
    }

    .disclaimer_btn {
      width: 100px;
      height: 100%;
      margin: 0 auto;
      padding: 0px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: #131313;
      background:#f5d59f;
      border-radius: 50px;
    }
  }
}
</style>


<template>

  <div id="disclaimerPopup">
    <!-- 免责框 -->
    <div class="disclaimerBox">
      <!-- 标题 -->
      <p>免责声明</p>
      <!-- 免责内容 -->
      <div class="disclaimer_content">
        {{ _props.config.content }}
      </div>
      <!-- 免责按钮 -->
      <div class="disclaimer_btn btn_one" @click = "_emit('close')">我已知悉</div>
    </div>
  </div>
</template>


<script setup lang="ts">

const _props = defineProps({
  config:{
    type:Object,
    default:()=> {
      return {
        content:"1、本资料所有文字、数据和图片仅供参考，不构成任何要约或承诺，相关数据、图片、说明及规划前景系本公司开发设计过程方案，涉及具体的权利义务、小区规划的配套和最终开发结果的，均以政府批准的相关法律文件及双方签署的商品房买卖合同和相关附件协议为准。2、部分房屋因楼栋及朝向关系无法暇景。3、因设计和施工的合理误差及后期的优化调整，后续可能会存在变化和调整(包括但不限于车位序号、面积、位置等)，双方最终以政府批准的相关法律文件和签署的书面合同及实际交付为准。\"\n"
      }
    }
  }
})
const _emit = defineEmits(["close"]);

</script>

